<template>
  <div class="login-container">
    <div class="wrapper">
      <div class="login-form scrollbox" ref="scrollbox">
        <a-row type="flex"
          align="middle"
          justify="space-around"
          style="width: 1200px;"
        >
          <a-col style="width: 500px;">
            <LogonForm ref="logonForm" />
          </a-col>
          <a-col style="width: 500px;">
            <LoginForm ref="loginForm" />
          </a-col>
        </a-row>
      </div>
      <div class="toggle"
        ref="toggle"
        @click="firstPage = !firstPage"
      >
        {{ firstPage ? '登录' : '注册' }}
      </div>
    </div>
  </div>
</template>

<script>
import delay from '@/utils/delay';
import LoginForm from './LoginForm.vue';
import LogonForm from './LogonForm.vue';

const keyframes = [
  { transform: 'rotate(45deg)' },
  { transform: 'rotate(45deg) translateY(-100px)' },
];
const option = {
  fill: 'forwards',
  duration: 250,
  easing: 'ease',
};
export default {
  name: 'Login',
  components: {
    LoginForm,
    LogonForm,
  },
  data() {
    return {
      firstPage: false,
    };
  },
  mounted() {
    this.$refs.scrollbox.scrollLeft = 650;
    this.$refs.scrollbox.style.scrollBehavior = 'smooth';
  },
  watch: {
    firstPage(newVal) {
      this.$refs.toggle.getAnimations()
        .forEach((animation) => animation.cancel());
      const outAnimate = this.$refs.toggle.animate(keyframes, option);
      outAnimate.onfinish = async () => {
        const form = newVal ? 'logonForm' : 'loginForm';
        this.$refs[form].$refs[form].resetFields();
        this.$refs.scrollbox.scrollLeft = newVal ? 50 : 650;
        await delay(600);
        this.$refs.toggle.animate(keyframes, {
          ...option,
          direction: 'reverse',
        });
      };
    },
  },
};
</script>

<style lang="less" scoped>
.login-container{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper{
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  position: relative;
  overflow: hidden;

  .toggle {
    position: absolute;
    user-select: none;
    background: #30a679ee;
    color: #fff;
    padding: 40px 70px 20px;
    cursor: pointer;
    transition: .25s;
    letter-spacing: .8em;
    font-size: 18px;
    transform: rotate(45deg);
    top: -8px;
    right: -77px;

    &:hover {
      background: #50b38a;
    }
    &:active {
      background: #1f805e;
    }
  }
}

.login-form{
  width: 500px;
  padding: 50px 0;
  overflow: hidden;
}

/* 错误信息的样式 */
/deep/ .ant-form-explain {
  text-indent: 2em;
}
</style>
